<template>
  <div class="mineWrap">
    <div class="titBg clearfix">
      <div class="left fl">
        <img src="../../common/imgs/icon/portrait.png" height="240" width="240" alt="">
      </div>
      <div class="right fl">
        <div class="mid">
          <div class="up">{{userName}}</div>
          <!-- <div class="name" >赵伟  13453806020</div> -->
          <div class="down">{{companyName}}</div>
        </div>
      </div>
      <div class="phoneIcon" @click="showPhone = true"></div>
    </div>
    <div class="myOrder clearfix">
      <div class="left fl">我的订单</div>
      <router-link to="/transport">
        <div class="right fr">查看所有订单 <i>></i></div>
      </router-link>

    </div>
    <ul class="status clearfix">
      <li v-show="userTypeRes == 30"  @click='toBid'>
        <div class="bid"></div>
        <p>竞价中</p>
      </li>
      <li v-show="userTypeRes == 30" @click='toDis'>
        <div class="dis"></div>
        <p>待调度</p>
      </li>
      <li v-show="userTypeRes == 40"  @click='toLoaded'>
        <div class="bid"></div>
        <p>已装车</p>
      </li>
      <li @click='transportation' >
        <div class="trans" ></div>
        <p>运输中</p>
      </li>
      <li v-show="userTypeRes == 40" @click='toReceipt'>
        <div class="bid"></div>
        <p>待返单</p>
      </li>
      <li @click='toTransSuc'>
        <div class="transSuc"></div>
        <p>运输完成</p>
      </li>
     <!--  <router-link to="loadMore">
        <li>
          <div class="transSuc"></div>
          <p>测试上下拉</p>
        </li>
      </router-link> -->
    </ul>
    <div class="news clearfix"  @click='messageList'>
      <div class="left fl"></div>
      <div class="right fl" >

        <p v-for="(item, index) in listMessage" :key="index">{{item}}</p>

       <!--  <p>货物已送达，请尽快上传签收单</p>
        <p>结算单已确认，请开票</p> -->
        <div v-show="listMessage.length <=0 " style="height: 86px; line-height:86px;">暂无消息</div>
      </div>
      <div class="more fr"></div>
    </div>
    <div class="list" v-show="userTypeRes == 30">
      <ul class="fir clearfix">
        <li @click='toCompanyInfo'>
          <i class="com"></i>
          <p>公司信息</p>
        </li>
        <li @click='toVehicle'>
          <i class="vehicle"></i>
          <p>车船管理</p>
        </li>
        <li @click='toLine'>
          <i class="line"></i>
          <p>我的线路</p>
        </li>
        <li @click='clickUpdatePassword'>
          <i class="pass"></i>
          <p>密码修改</p>
        </li>

      <!-- <ul class="clearfix">
        <li  @click='toWechat'>
          <i class="wechat"></i>
          <p>微信关注</p>
        </li>-->
        <router-link to="/aboutUs">
          <li>
            <i class="me"></i>
            <p>关于我们</p>
          </li>
        </router-link>
        <router-link  :to="{path:'/messageSetting',query:{type:30}}" >
          <li>
            <i class="messageSetting"></i>
            <p>消息推送配置</p>
          </li>
        </router-link>

      </ul>
    </div>
    <div class="list" v-show="userTypeRes == 40">
      <ul class="fir clearfix">
        <li @click='clickUpdatePassword'>
          <i class="pass"></i>
          <p>密码修改</p>
        </li>
       <!--  <li @click='toWechat'>
          <i class="wechat"></i>
          <p>微信关注</p>
        </li>-->
        <router-link to="/aboutUs">
          <li>
            <i class="me"></i>
            <p>关于我们</p>
          </li>
        </router-link>
        <router-link :to="{path:'/messageSetting',query:{type:40}}" >
          <li>
            <i class="messageSetting"></i>
            <p>消息推送配置</p>
          </li>
        </router-link>
      </ul>
    </div>
    <div class="log">
      <a class="logit" @click='clickLogout'>退出登录</a>
    </div>
    <!-- <div>{{callhandler}}</div> -->
    <!-- <mt-button class='btn needsclick' type="primary" size="large" @click.native='toDetail()'>我要报价</mt-button> -->
    <m-tabbar :child-msg="msg"></m-tabbar>
    <mt-popup v-model="showPhone" popup-transition="popup-fade" class="pup">
      <div class="phonePopup">
        <div class="top">
          <!-- <img src="~common/imgs/combinedShapeCopy.png" alt="背景"> -->
            <div class="pre"></div>
            <div class="closed" @click="showPhone = false"></div>
        </div>
        <div class="bottom">
          <p class="name">姓名: 赵伟</p>
          <p class="phoneCode">{{phoneCode}}</p>
          <div class="icon" @click="call"></div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from "vuex";
import ApiService from "@/services/API-servies";
import { Tabbar, Button,Popup } from "mint-ui";
import MTabbar from "../foot/Tabbarfoot";
export default {
  created() {
    // this.toDetail();
    window.clickLogout = this.clickLogout;
    window.clickUpdatePassword = this.clickUpdatePassword;
  },
  mounted() {
    setTimeout(() => {
      if (this.$isBrower.isAndroid) {
      } else if (this.$isBrower.isIos) {
        this.setIosTitleType();
      }
    }, 0);
    this.getUserType();
    this.getUserInfo();
    this.getMessage();
  },
  data() {
    return {
      msg: "mine",
      callhandler: "",
      companyCode: "",
      companyType: "",
      userName: "",
      companyName: "",
      isDriver: true,
      res: "",
      userTypeRes: "",
      listMessage: [],
      pageSize: 10,
      pageNo: 1,
      showPhone: false,
      phoneCode: "134 5380 6020"
    };
  },
  computed: {
    ...mapGetters(["userType"])
  },
  methods: {
    //车船管理
    toVehicle() {
      this.$router.push("vehicle");
    },
    //跳转公司信息页面
    toCompanyInfo() {
      this.$router.push({
        name: "",
        path: "/companyInfo",
        query: {
          companyCode: this.companyCode,
          companyType: this.companyType,
          ud: 1
        }
      });
    },
    //竞价中
    toBid() {
      this.$router.push({ name: "", path: "/bidding" });
    },
    //待调度
    toDis() {
      var _userType = this.userTypeRes;
      this.$router.push({
        name: "",
        path: "/transport",
        query: { statusActive: "60", myType: _userType }
      });
    },
    //已装车
    toLoaded() {
      var _userType = this.userTypeRes;
      this.$router.push({
        name: "",
        path: "/transport",
        query: { statusActive: "65", myType: _userType }
      });
    },
    //运输中
    toTrans() {
      var _userType = this.userTypeRes;
      this.$router.push({
        name: "",
        path: "/transport",
        query: { statusActive: "65", myType: _userType }
      });
    },
    toLine() {
      this.$router.push({ name: "", path: "/followLine" });
    },
    //待返单
    toReceipt() {
      var _userType = this.userTypeRes;
      this.$router.push({
        name: "",
        path: "/transport",
        query: { statusActive: "70", myType: _userType }
      });
    },
    //运输中
    transportation() {
      var _userType = this.userTypeRes;
      this.$router.push({
        name: "",
        path: "/transport",
        query: { statusActive: "65", myType: _userType }
      });
    },
    //运输完成
    toTransSuc() {
      var _userType = this.userTypeRes;
      this.$router.push({
        name: "",
        path: "/transport",
        query: { statusActive: "80", myType: _userType }
      });
    },
    toWechat() {
      console.log("微信页面");
    },
    /*toDetail(){
        let params = 'aaaa';
        this.$bridge.callhandler('ObjCEcho', params, (data) => {
          // 处理返回数据
          this.callhandler = data
        })
      },
      getUserInfo(){
        this.$bridge.registerhandler('JSEcho', (data, responseCallback) => {
          alert('JS Echo called with:', data)
          responseCallback(data)
        })
      }*/
    getUserInfo() {
      ApiService.session.getSession().then(res => {
        if (res.meta.retCode === "0") {
          console.log(res.data);
          this.userName = res.data.user.userName;
          if (null == res.data.companyVo || "null" == res.data.companyVo) {
            return;
          }
          this.companyCode = res.data.companyVo.companyCode;
          this.companyType = res.data.companyVo.companyType;
          this.companyName = res.data.companyVo.companyName;
          //this.isDriver = res.data.companyVo.isDriver;
        }
      });
    },
    clickLogout() {
      if (this.$isBrower.isAndroid) {
        app.clickLogout();
      } else if (this.$isBrower.isIos) {
        this.toLogOut();
      }
    },
    clickUpdatePassword() {
      if (this.$isBrower.isAndroid) {
        app.clickUpdatePassword();
      } else if (this.$isBrower.isIos) {
        this.toUpdatePassword();
      }
    },
    toLogOut() {
      this.$bridge.callhandler("toLogOut", data => {});
    },
    toUpdatePassword() {
      this.$bridge.callhandler("toUpdatePassword", data => {});
    },
    //ios 设置头部信息
    setIosTitleType() {
      let params = {
        isReturn: false,
        isSearch: false,
        isTitleSegment: false
      };
      this.$bridge.callhandler("needBarButton", params, data => {});
    },
    getUserType() {
      if (!this.userType) {
        let localUserType = localStorage.userType;
        this.userTypeRes = localUserType;
      } else {
        this.userTypeRes = this.userType;
      }
    },
    getMessage() {
      let params = {
        pageSize: this.pageSize,
        pageNo: this.pageNo
      };
      ApiService.message.load(params).then(res => {
        if (res.meta.retCode === "0") {
          var _data = res.data;
          for (var i = _data.list.length - 1; i >= 0; i--) {
            var _obj = _data.list[i];
            this.listMessage.push(_obj.messageContent);
          }
        }
      });
    },
    messageList() {
      this.$router.push({ path: "messageList" });
    },
    call() {
      if (this.$isBrower.isAndroid) {
        app.makePhone({ phone: '13453806020' });
      } else if (this.$isBrower.isIos) {
        let params = {
          phone: '13453806020'
        };
        this.$bridge.callhandler("makePhone", params, data => {});
      }
    }
  },
  watch: {},
  components: {
    MTabbar,
    MtButton: Button,
    MtPopup: Popup
  }
};
</script>

<style scoped lang="less" rel="stylesheet/less">
@import "~common/less/variable.less";
@import "~common/less/modules/mine.less";
</style>
